<template>
	<view class="indexPage">
		<scroll-view class="left" scroll-y >
				<view :class="activeId === item.id ? 'leftActiveItem' : ''"  @click="leftItemOnclick(item.id)" v-for="item in leftItems" class="item" :key="item.id">
					<uni-badge :offset="[12, 12]" class="uni-badge-left-margin" :text="item.selectedCount" absolute="rightTop" size="small">
						<view>{{item.text}}</view>
					</uni-badge>
				</view>
		</uni-badge>
			<view class="leftButtom"></view>
		</scroll-view>
		<scroll-view class="right" scroll-y> 
			<view class="goodsCard" v-for="item in goodsItems" v-if="item.classId === activeId" :key="item.id">
				<uni-row>
					<uni-col :span="8">
						<image class="goodsCardImage" :src="item.img" mode="aspectFit" />
					</uni-col>
					<uni-col :span="16">
						<view class="goodsTitle">
							<text style="font-weight: 900">{{item.title}}</text>
						</view>
						<view class="goodsSubTitle">
							<text>{{item.subTitle}}</text>
						</view>
						<text class="goodsPrice">￥{{item.price}}</text>
						<view class="goodsButtom">
							<uni-number-box :value="item.selectedCount" @change="goodsNumberChange" />
						</view>
					</uni-col>
				</uni-row>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeId: 1,
				goodsNumber: 3,
				leftItems: [{
					text: "长长长长文字长",
					id: 1,
					selectedCount: 12,
				},{
					text: "文字2",
					id: 2,
					selectedCount: 32,
				},{
					text: "文字3",
					id: 3,
					selectedCount: 51,
				},{
					text: "文字4",
					id: 4,
					selectedCount: 116,
				},{
					text: "文字5",
					id: 5,
					selectedCount: 3,
				}],
				goodsItems: [{
					id: 1,
					classId: 1,
					img: "https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
					title: "标题1",
					subTitle: "副标题1",
					price: 333.00,
					selectedCount: 3
				},{
					id: 2,
					classId: 1,
					img: "https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
					title: "标题1",
					subTitle: "副标题1",
					price: 32.00,
					selectedCount: 2
				},{
					id: 3,
					classId: 2,
					img: "https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
					title: "标题1",
					subTitle: "副标题1",
					price: 321.00,
					selectedCount: 7
				}]
			}
		},
		onLoad() {

		},
		methods: {
			leftItemOnclick(id){
				this.activeId = id;
			},
			goodsNumberChange(value){
				this.goodsNumber = value;
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.indexPage{
		height: 100%;
		.left{
			width: 180rpx;
			height: 100%;
			background-color: #F8F8F8;
			float: left;
			z-index: 3;
			.uni-badge-left-margin{
				width: 100%;
			}
			.item{
				width: 100%;
				height: 60px;
				line-height: 60px;
				color: #333;
				font-size: 25rpx;
				text-align: center;
			};
			.leftActiveItem{
				background-color: #FFFFFF;
				border-left: 2px solid #FF7F50;
			}
			.leftButtom{
				height: 200px;
			}
		}
		.right{
			z-index: 2;
			float: right;
			width: 550rpx;
			height: 100%;
		}
	}
	scroll-view ::-webkit-scrollbar {  
	    display: none !important;  
	    width: 0 !important;  
	    height: 0 !important;  
	    -webkit-appearance: none;  
	    background: transparent;  
	}
	.goodsCard{
		margin-top: 10px;
		padding: 3px;
		width: 100%;
		height: 80px;
		border-radius: 5px;
		.goodsCardImage {
			flex: 1;
			width: 80px;
			height: 80px;
		}
		.goodsTitle{
			margin-top: 3px;
			text{
				font-size: 30rpx;
			}
			padding: 3px;
		}
		position: relative;
	}
	.goodsSubTitle{
		overflow: hidden; /* 超出一行文字自动隐藏 */
		text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
		white-space: nowrap; /* 强制不换行 */
		font-size: 25rpx;
		padding: 3px;
	}
	.goodsPrice{
		color: #FF7F50;
	}
	.uni-badge--x{
		width: 100%;
	}
	.goodsButtom{
		position: absolute;
		bottom: 0;
		right: 15px;
	}
</style>
